<template>
  <div>
    <nav-header></nav-header>
    <div class="accessory-result-page accessory-page">
      <bread>
        <span>Goods</span>
      </bread>
      <div class="container">
        <div class="filter-nav">
          <span class="sortby">Sort by:</span>
          <a href="javascript:void(0)" class="default cur">Default</a>
          <a @click="sortGoods" href="javascript:void(0)" class="price">Price <svg class="icon icon-arrow-short"><use xlink:href="#icon-arrow-short"></use></svg></a>
          <a href="javascript:void(0)" class="filterby stopPop" @click="showFilterPop">Filter by</a>
        </div>
        <div class="accessory-result">
          <!-- filter -->
          <div class="filter stopPop" id="filter" v-bind:class="{'filterby-show':filterBy}">
            <dl class="filter-price">
              <dt>Price:</dt>
              <dd><a href="javascript:void(0)" v-bind:class="{'cur':priceChecked=='all'}" @click="setPriceFilter('all')">All</a></dd>
              <dd v-for="(price,index) in priceFilter">
                <a href="javascript:void(0)" @click="setPriceFilter(index)" v-bind:class="{'cur':priceChecked==index}">{{price.startPrice}} - {{price.endPrice}}</a>
              </dd>
            </dl>
          </div>

          <!-- search result accessories list -->
          <div class="accessory-list-wrap">
            <div class="accessory-list col-4">
              <ul>
                <li v-for="item in goodsList">
                  <div class="pic">
                    <a href="#"><img v-lazy="'/static/'+item.productImage" alt=""></a>
                  </div>
                  <div class="main">
                    <div class="name">{{item.productName}}</div>
                    <div class="price">{{item.salePrice}}</div>
                    <div class="btn-area">
                      <a href="javascript:;" class="btn btn--m" @click="addCart(item.productId)">加入购物车</a>
                    </div>
                  </div>
                </li>
              </ul>
              <div class="load-more" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
                  <img src="./../assets/loading-spinning-bubbles.svg" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="md-overlay" v-show="overLayFlag" @click="closePop"></div>
    <modal v-bind:mdShow="mdShow" v-on:close="closeModal">
      <p slot="message">请先登录，才能加入购物车</p>
      <p slot="btnGroup">
        <a class="btn btn--m" href="javascript:;" @click="closeModal">关闭</a>
      </p>
    </modal>
    <modal v-bind:mdShow="mdShowCart" v-on:close="closeModal">
        <p slot="message">
          <svg class="icon-status-ok">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-status-ok"></use>
          </svg>
          <span>加入购物车成功</span>
        </p>
        <div slot="btnGroup">
          <a class="btn btn--m" href="javascript:;" @click="mdShowCart = false">继续购物</a>
          <router-link class="btn btn--m btn--red" href="javascript:;" to="/cart">查看购物车</router-link>
        </div>
      </modal>
    <nav-footer></nav-footer>
  </div>
</template>
<style>
  .accessory-list-wrap ul::after{
    clear: both;
    content: "";
    height: 0;
    display: block;
    visibility: hidden;
  }
  .load-more{
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>

<script>
    import "./../assets/css/base.css"
    import "./../assets/css/product.css"
    import "./../assets/css/login.css"
    import NavHeader from "@/components/Header.vue"
    import NavFooter from "@/components/Footer.vue"
    import Bread from "@/components/Bread.vue"
    import Modal from "@/components/Modal.vue"
    import axios from "axios"

    export default{
        data(){
            return {
              goodsList: [],
              sortFlag: true,
              page:1,
              pageSize:8,
              priceFilter:[
                {
                  startPrice: "0.00",
                  endPrice: "500.00"
                },
                {
                  startPrice: "500.00",
                  endPrice: "1000.00"
                },
                {
                  startPrice: "1000.00",
                  endPrice: "2000.00"
                },
                {
                  startPrice: "2000.00",
                  endPrice: "5000.00"
                }
              ],
              priceChecked: "all",
              filterBy: false,
              overLayFlag: false,
              busy: true,
              priceLevel: "all",
              mdShow: false,
              mdShowCart: false
            }
        },
        components: {
          NavHeader: NavHeader,
          NavFooter: NavFooter,
          Bread: Bread,
          Modal: Modal
        },
        mounted: function(){
          this.getGoodsList();
        },
        methods: {
          getGoodsList(flag){
            var params = {
              page: this.page,
              pageSize: this.pageSize,
              sort: this.sortFlag?1:-1,
              priceLevel: this.priceLevel
            }
            axios.get("/goods",{params:params}).then((result)=>{
              var res = result.data;
              if(res.status == "0"){
                if(flag){
                  this.goodsList = this.goodsList.concat(res.result.list);
                  if(res.result.count == 0){
                    this.busy = true;
                  }else{
                    this.busy = false;
                  }
                }else{
                  this.goodsList = res.result.list;
                  this.busy = false;
                }
              }else{
                this.goodsList = [];
              }
            });
          },
          showFilterPop(){
              this.filterBy = true;
              this.overLayFlag = true;
          },
          closePop(){
              this.filterBy = false;
              this.overLayFlag = false;
          },
          setPriceFilter(index){
              this.priceChecked = index;
              this.page = 1;
              this.priceLevel = index;
              this.getGoodsList();
              this.closePop();
          },
          sortGoods(){
            this.sortFlag = !this.sortFlag;
            this.page = 1;
            this.getGoodsList();
          },
          loadMore(){
            this.busy = true;
            setTimeout(() => {
              this.page++;
              this.getGoodsList(true);
            }, 1000);
          },
          addCart(productId){
            axios.post("/goods/addCart",{
              productId: productId
            }).then((response)=>{
              let res = response.data;
              if(res.status == "0"){
                this.mdShowCart = true;
              }else{
                this.mdShow = true;
              }
            });
          },
          closeModal(){
            this.mdShow = false;
            this.mdShowCart = false;
          }
        }
    }
</script>
